<template>
    <div class="searchContainer">
        <a-input placeholder="搜一搜" v-model="searchValue" @pressEnter="onSearch" class="myInput" enterButton>
            <a-icon  slot="prefix"  type="search" />
        </a-input>
    </div>
</template>
<script>
export default {
    name: "SearchBar",
    props: {
        searchKey: {
            type: String,
            default: ""
        }
    },
    components: {},
    data() {
        return {
            searchValue: ""
        }
    },
    methods: {
        setSearchKey(searchKey){
            this.searchValue = searchKey;
            //console.log(this.searchValue);
        },
        onSearch(){
            //console.log(this.searchValue);
            this.$emit("search", this.searchValue);
        }
    },
    mounted() {
        //console.log(this.searchKey);
        this.searchValue = this.searchKey?this.searchKey:"";
    },
    watch: {},
    computed: {
       
    }
}

</script>
<style scoped>
.searchContainer{
    padding: 10px;
}
 ::v-deep .ant-input{
    border-radius: 20px !important;
}
</style>